<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>穿梭框</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .csk>*{
            margin: 10px 10px 10px 0px;
        }
        ul {
            border: 1px solid #666;
            width: 100px;
            height: 200px;
            padding: 10px;
        }
        li:hover {
            background-color: #eee;
            cursor: pointer;
        }
        button{
            min-width: 20px;
        }
    </style>
</head>
<body style="padding: 20px">
<div id="app">
    <h1>穿梭框</h1>
    <div class="csk" style="display: flex">
        <ul>
            <li>宋江</li>
            <li>吴用</li>
            <li>李逵</li>
        </ul>
        <div style="padding-top: 50px">
            <button><</button>
            <br>
            <button>></button>
            <br>
            <button><<</button>
            <br>
            <button>>></button>
        </div>
        <ul>
            <li>武松</li>
            <li>林冲</li>
        </ul>
    </div>
</div>
<script>
    var Hero = function (name, alias, p, i, a) {
        this.name = name;
        this.alias = alias;
        this.p = p;
        this.i = i;
        this.a = a;
    }
    var v = new Vue({
        el: "#app",
        data: {
            heroes: [
                new Hero("林冲", "豹子头", 99, 85, 90),
                new Hero("武松", "行者", 98, 80, 88),
                new Hero("秦明", "霹雳火", 95, 82, 85),
                new Hero("白胜", "白日鼠", 75, 80, 85),
                new Hero("石秀", "拼命三郎", 97, 82, 83),
            ],
        }
    })
</script>
</body>
</html>